import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:get/get.dart';

import 'logic.dart';

class ContentPage extends StatefulWidget {
  final id;

  const ContentPage({Key? key, required this.id}) : super(key: key);

  @override
  _ContentPageState createState() => _ContentPageState();
}

class _ContentPageState extends State<ContentPage>
    with AutomaticKeepAliveClientMixin {
  final ContentLogic logic = Get.put(ContentLogic());

  double screenWidth = 375;
  ScrollController _scrollController = ScrollController();

  //获取屏幕宽度

  late Offset pointerStart;
  late Offset pointerEnd;

  int lastPage = 0;

  int itemCount=20;


  PointerDownEventListener getPointDownListenerInHorizontal() {
    return (event) {
      pointerStart = event.position;
    };
  }

  PointerUpEventListener getPointUpListenerInHorizontal() {
    return (event) {
      pointerEnd = event.position;

      //滑动距离
      var touchRangeX = pointerStart.dx - pointerEnd.dx;

      if (touchRangeX.abs() < screenWidth / 4) {

        var nextOffset = screenWidth * lastPage;

        animateToOffset(_scrollController, nextOffset);

      }

      if (touchRangeX < 0 && lastPage > 0) {

        lastPage--;
        animateToOffset(_scrollController, lastPage * screenWidth);

      } else if (touchRangeX > 0 && lastPage < (itemCount/3)-1) {

        lastPage++;
        animateToOffset(_scrollController, lastPage * screenWidth);
      }
    };
  }

  void animateToOffset(ScrollController controller, double offset) {
    controller.animateTo(offset,
        duration: Duration(milliseconds: 200), curve: Curves.easeIn);
  }

  @override
  void initState() {
    super.initState();
    logic.getGird();
    print("initState");
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    print("build");
    screenWidth = MediaQuery.of(context).size.width;

    return GetBuilder<ContentLogic>(
      builder: (logic) {
        return EasyRefresh.custom(
          header: MaterialHeader(),
          onRefresh: () async {},
          slivers: <Widget>[
            GetBuilder<ContentLogic>(
                id: "banner",
                builder: (logic) {
                  return SliverToBoxAdapter(
                    child: Container(
                      margin: EdgeInsets.only(top: 15),
                      height: 100.0,
                      child: Listener(
                        onPointerDown: getPointDownListenerInHorizontal(),
                        onPointerUp: getPointUpListenerInHorizontal(),
                        child: ListView.builder(
                          controller: _scrollController,
                          scrollDirection: Axis.horizontal,
                          itemCount: itemCount,
                          itemExtent: screenWidth/3,
                          itemBuilder: (context, index) {
                            return Container(
                              child: Card(
                                color: Colors.primaries[index],
                              ),
                            );
                          },
                        ),
                      ),
                    ),
                  );
                }),
            GetBuilder<ContentLogic>(
                id: "grid",
                builder: (logic) {
                  return SliverPadding(
                    padding: EdgeInsets.only(top: 15),
                    sliver: SliverGrid(
                      //Grid
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 4, //Grid按两列显示
                          mainAxisSpacing: 10.0,
                          crossAxisSpacing: 10.0,
                          mainAxisExtent: 50),
                      delegate: SliverChildBuilderDelegate(
                        (BuildContext context, int index) {
                          return Column(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Icon(Icons.home),
                              Text(logic.grid[index])
                            ],
                          );
                        },
                        childCount: logic.grid.length,
                      ),
                    ),
                  );
                }),
            GetBuilder<ContentLogic>(
              id: "list",
              builder: (logic) {
                return SliverPadding(
                  padding: EdgeInsets.only(top: 15),
                  sliver: SliverList(delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                    return Container(
                      alignment: Alignment.center,
                      child: Text('list item $index'),
                    );
                  })),
                );
              },
            )
          ],
        );
      },
    );
  }

  @override
  bool get wantKeepAlive => true;
}
